<template>
	<div class='main'>
		<div id="domId"></div>
	</div>
</template>

<script>
	const api = window.$api.demo.cad
	export default {
		data() {
			return {
				viewToken: '',
				viewer3D: '',
				app: '',
				viewAdded: false,
				isMapLoaded: false,
				loaderConfig: null,
				urls: ''
			}
		},
		async created() {
			
			let data = {
				fileId: '10000764466766'
			}
			
			const res = await this.$awaitWraper(api.getviewtoken(data))
			this.viewToken = res
			this.getMap()
		},
		methods: {
			getMap(){
				var that = this
				var options = new window.BimfaceSDKLoaderConfig();
				options.viewToken = that.viewToken;
				window.BimfaceSDKLoader.load(options, that.successCallback, that.failureCallback);
			},
			setButtonText(btnId, text) {
				var dom = document.getElementById(btnId);
				if (dom != null && dom.nodeName == "BUTTON") {
					dom.innerText = text;
				}
			},

			// 加载成功回调函数
			successCallback(viewMetaData) {
				var that = this
				var dom4Show = document.getElementById('domId');
				// 设置WebApplication3D的配置项
				var webAppConfig = new window.Glodon.Bimface.Application.WebApplication3DConfig();
				webAppConfig.domElement = dom4Show;
				webAppConfig.enableLogarithmicDepthBuffer = true;
				// 创建WebApplication3D，用以显示模型
				var app = new window.Glodon.Bimface.Application.WebApplication3D(webAppConfig);
				app.addView(viewMetaData.viewToken);
				var viewer3D = app.getViewer();
				that.viewer3D = viewer3D;
				// 增加加载完成监听事件
				viewer3D.addEventListener(window.Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function() {
					that.viewAdded = true;
					//自适应屏幕大小
					window.onresize = function() {
						viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
					}
					// 渲染场景
					viewer3D.render();
				});
			},
			// 加载失败回调函数
			failureCallback(error) {
				console.log(error);
			},

		},
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	html,
	body {
		height: 100%;
	}

	.buttons {
		font-size: 0;
	}

	.button {
		margin: 5px 0 5px 5px;
		width: 100px;
		height: 30px;
		border-radius: 3px;
		border: none;
		background: #32D3A6;
		color: #FFFFFF;
	}

	.main {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	#domId {
		flex: 1;
		height: 500px;
	}
</style>
